<template>
  <div class="bg-white pt-3 pl-3 pr-3">
    <div class="card-head display-flex ai-center pb-2">
      <i class="iconfont pb-2" :class="`icon-${icon}`"></i>
      <div class="flex-1 font-xl ml-1 font-weight">{{title}}</div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "HeroCard",
    props:{
     icon:{require:true,type:String},
     title:{require:true,type:String}
    }
  }
</script>

<style scoped>
 .iconfont{
   font-size: 1.833rem;
 }
</style>